<div style="padding:30px" class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <label class="layui-form-label">所属分类：</label>
        <div class="layui-input-block">
            <select name="parent_id" id="parent_id" lay-verify="required" lay-search="">
                <option value="0" {eq name="$parent_id" value="0" }selected{
                /eq}>顶级分类</option>
                {foreach $parent as $key=>$vo}
                <option value="{$vo.id}" {eq name="$parent_id" value="$vo.id" }selected{
                /eq}>{$vo.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属类型：</label>
        <div class="layui-input-block">
            <select name="type_id" id="type_id" lay-verify="required" lay-search="">
                <option value="0">通用类型</option>
                {foreach $type as $key=>$vo}
                <option value="{$vo.id}">{$vo.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类名称：</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入分类名称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类图标：</label>

        <div class="layui-input-block">
            {Jshop:image id='image_id' name="image_id" value=""/}

            <div class="layui-form-mid layui-word-aux list-tag">
                图标尺寸建议：60px*60px
            </div>
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序：</label>
        <div class="layui-input-block">
            <input type="number" name="sort" id="sort" required lay-verify="required" placeholder="排序"
                   autocomplete="off" class="layui-input" value="100">
        </div>
    </div>

    <div class="layui-tab layui-tab-brief">

        <ul class="layui-tab-title">
            <li class="layui-this">2D定制配置</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-table" lay-size="sm">
                    <thead>
                    <tr>
                        <th>部位名称</th>
                        <th>宽度</th>
                        <th>高度</th>
                        <th>左偏移</th>
                        <th>上偏移</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="type_view">
                    <tr data-id="0">
                        <td>
                            <input data-name="name" type="text" name="name[0]" value=""
                                   placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <input data-name="width" type="text" name="width[0]" value=""
                                   placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <input data-name="height" type="text" name="height[0]" value=""
                                   placeholder="  " autocomplete="off"
                                   class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <input data-name="left" type="text" name="left[0]" value=""
                                   placeholder="  " autocomplete="off"
                                   class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <input data-name="top" type="text" name="top[0]" value=""
                                   placeholder="  " autocomplete="off"
                                   class="layui-input seller-inline-1">
                        </td>
                        <td>

                            <a class="layui-btn layui-btn-xs add-type-class">
                                添加
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>

        </div>
    </div>


    <button class="layui-btn layui-btn-fluid add-save-btn">保存</button>
</div>

<script>
    //渲染表单
    layui.use(['form','table'], function () {
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;
        form.render();

        $(".layui-tab").on('click', '.add-type-class', function (e) {
            var getTpl = type_l_tpl.innerHTML;
            var lastId = $(this).parent().parent().parent().find('tr').last().attr('data-id');

            var tmpData = {};
            tmpData.id = parseInt(lastId) + 1;
            laytpl(getTpl).render(tmpData, function (html) {
                $("#type_view").append(html);
            });
            form.render();

        });

        $(".layui-tab").on('click', '.del-type-class,.del-params-class', function (e) {
            $(this).parent().parent().remove();
        })

    });
</script>



<script id="type_l_tpl" type="text/html">
    <tr data-id="{{ d.id }}">
        <td>
            <input data-name="name" type="text" name="name[{{ d.id }}]" required value="" lay-verify="required"
                   placeholder="" autocomplete="off" class="layui-input seller-inline-1">
        </td>
        <td>
            <input data-name="width" type="text" name="width[{{ d.id }}]" value=""
                   placeholder="" autocomplete="off" class="layui-input seller-inline-1">
        </td>
        <td>
            <input data-name="height" type="text" name="height[{{ d.id }}]" value=""
                   placeholder="" autocomplete="off" class="layui-input seller-inline-1">
        </td>
        <td>
            <input data-name="left" type="text" name="left[{{ d.id }}]" value=""
                   placeholder="" autocomplete="off"
                   class="layui-input seller-inline-1">
        </td>
        <td>
            <input data-name="top" type="text" name="top[{{ d.id }}]" value=""
                   autocomplete="off"
                   class="layui-input seller-inline-1">
        </td>
        <td>

            <a class="layui-btn layui-btn-xs add-type-class">
                添加
            </a>
            <a class="layui-btn layui-btn-danger layui-btn-xs del-type-class">
                删除
            </a>
        </td>
    </tr>
</script>